<script setup lang="ts">
import type { NoticeItem } from '@/types/home'
import { ref } from 'vue'

// 定义 props 接收
const props = defineProps<{
  noticeList: NoticeItem[]
}>()

// 当前显示的公告索引
const currentIndex = ref(0)

// swiper 切换事件
const onSwiperChange = (e: any) => {
  currentIndex.value = e.detail.current
}

// 点击查看更多
const handleViewMore = () => {
  // 获取当前显示的公告ID
  const currentNotice = props.noticeList[currentIndex.value]
  // 跳转到公告详情页，传递公告ID
  uni.navigateTo({
    url: `/pages/notice/notice?id=${currentNotice.id}`,
  })
}
</script>

<template>
  <view class="notice-container">
    <view class="notice-bar">
      <!-- 左侧标签区域 -->
      <view class="notice-left">
        <text class="notice-label-top">信息</text>
        <text class="notice-label-bottom">公告</text>
      </view>

      <!-- 中间公告内容 -->
      <view class="notice-content">
        <!-- <text class="notice-icon">📢</text> -->
        <!-- <text class="notice-text">{{ noticeContent }}</text> -->
        <swiper
          vertical
          autoplay
          :interval="3000"
          :duration="300"
          circular
          @change="onSwiperChange"
        >
          <swiper-item v-for="item in noticeList" :key="item.id">
            <text class="notice-text">{{ item.title }}</text>
          </swiper-item>
        </swiper>
      </view>

      <!-- 右侧按钮 -->
      <view class="notice-right">
        <view class="view-more-btn" @tap="handleViewMore">
          <text class="btn-text">点击查看</text>
          <uni-icons type="right" color="#ffffff" size="12"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.notice-container {
  padding: 20rpx;
}

.notice-bar {
  display: flex;
  align-items: center;
  background-color: $notice-background-color;
  border-radius: $brand-border-radius 16rpx $brand-border-radius $brand-border-radius;
  padding: 20rpx 24rpx;
  position: relative;

  // 左侧标签区域
  .notice-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 24rpx;
    flex-shrink: 0;

    .notice-label-top,
    .notice-label-bottom {
      font-size: 24rpx;
      color: #30ccff; // "信息公告" 字体颜色
      font-weight: bold;
      line-height: 1.4;
    }
  }

  // 中间公告内容
  .notice-content {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 40rpx; // 设置固定高度,确保 swiper 能正常显示
    max-width: calc(100% - 180rpx); // 限制最大宽度,为右侧按钮预留空间
    margin-right: 8rpx; // 与右侧按钮的间距

    .notice-icon {
      font-size: 28rpx;
      margin-right: 12rpx;
      flex-shrink: 0;
    }

    .notice-text {
      flex: 1;
      font-size: 26rpx;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    swiper {
      flex: 1;
      height: 40rpx; // swiper 必须设置明确的高度才能显示

      swiper-item {
        height: 40rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx; // 调整字体大小与设计一致
        color: #666;

        .notice-text {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #666; // 确保文本颜色正常显示
        }
      }
    }
  }

  // 右侧按钮
  .notice-right {
    position: absolute;
    top: 0rpx;
    right: 0rpx;

    .view-more-btn {
      display: flex; //  启用弹性布局
      align-items: center; // center - 垂直居中
      justify-content: center; // center - 水平居中
      background: linear-gradient(135deg, #3eaef7 0%, #3eaef7 100%);
      padding: 6rpx 12rpx 6rpx 22rpx; // 增加左右内边距，padding: 上 右 下 左;
      border-radius: 16rpx 16rpx 2rpx 0; // border-radius: 左上 右上 右下 左下;
      // 添加了 clip-path 属性来实现左下角的切角效果：
      // 0 0 - 左上角起点
      // 100% 0 - 右上角
      // 100% 100% - 右下角
      // 10rpx 100% - 底边距离左边10rpx的位置
      // 0 calc(100% - 28rpx) - 左边距离底部28rpx的位置（形成70度切角）
      clip-path: polygon(0 0, 100% 0, 100% 100%, 20rpx 100%, 0 calc(100% - 50rpx));
      box-shadow: 0 2rpx 4rpx rgba(74, 124, 250, 0.15);

      .btn-text {
        font-size: 20rpx;
        color: #ffffff;
        font-weight: 500;
        line-height: 1; // 防止文字垂直偏移,1 确保文字不会因为行高导致偏移
        margin-right: 2rpx; // 与箭头之间的间距
        font-weight: normal;
      }
    }
  }
}
</style>
